<template>
  <div id="editor">
    <el-form label-position="right" label-width="80px" :model="form" ref="formSkill">
      <el-form-item label="类型：">
        <el-select v-model="form.type_info" clearable  placeholder="请选择">
          <el-option
            v-for="item in auxiliary_knowledge_class"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标题：">
        <el-input v-model="form.title" />
      </el-form-item>
      <el-form-item label="正文：">
        <div id="wangeditor" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { options } from '@/api/question'
import { auxiliaryinsertOne, getauxiliary, upateByIdauxiliary } from '@/api/plantList'
import wangEditor from 'wangeditor'
export default {
  data() {
    return {
      form: {
        type_info: '',
        title: ''
      },
      auxiliary_knowledge_class: [],
      editor: null,
      editorData: ''
    }
  },
  mounted() {
    this.getOptions()
    const editor = new wangEditor(`#wangeditor`)
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml
    }
    // 创建编辑器
    editor.config.uploadImgShowBase64 = true
    editor.config.showLinkImg = false  //关闭网络路径图片方式
    editor.config.uploadImgServer = 'http://47.106.140.255:8762/plant/image/rich-upload' // 上传图片的接口地址
    editor.config.uploadFileName = 'file' // formdata中的name属性
    editor.create()
    this.editor = editor
  },
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy()
    this.editor = null
  },
  methods: {
    async getDetail() {
      const id = this.$route.params.id
      if (id !== 'add') {
        const res = await getauxiliary(id)
        const code = Number(res.code)
        if (code === 200) {
          this.form.title = res.data.title
          this.form.type_info = res.data.type_info
          this.editor.txt.html(res.data.text_info)
        }
      }
    },
    async onSubmit() {
      const id = this.$route.params.id
      // 通过代码获取编辑器内容
      const params = id === 'add'
        ? Object.assign(this.form, {
          text_info: this.editor.txt.html()
        })
        : Object.assign(this.form, {
          text_info: this.editor.txt.html(),
          id
        })
      // console.log(id)
      const res = id == 'add'
        ? await auxiliaryinsertOne({...params, id: undefined})
        : await upateByIdauxiliary(params)
      const code = Number(res.code)
      if (code === 200) {
        this.$refs['formSkill'].resetFields();
        this.$router.push('/plantlib/skill/manage')
      }
    },
    async getOptions() {
      const res = await options()
      const code = Number(res.code)
      if (code === 200) {
        this.auxiliary_knowledge_class = res.data.auxiliary_knowledge_class
        this.getDetail()
      }
    }
  }
}
</script>
<style lang="scss">
#editor{
  .el-select, .el-input{
    width: 300px;
  }
  #wangeditor div{
    // z-index: 1 !important;
  }
}
</style>
